
var imgSlide = function (option) {
    this._init(option);
    this._autoPlay();
};
imgSlide.prototype = {
    _init: function (option) {
        var slideContainer = document.getElementById(option.slideContainer);
        var d = {
            prev: slideContainer.getElementsByClassName('prev')[0],
            next: slideContainer.getElementsByClassName('next')[0],
            containerWrap: slideContainer.getElementsByClassName('slide-wrap')[0],
            slideList: slideContainer.getElementsByTagName('li'),
            pagenation: slideContainer.getElementsByClassName('pagenation')[0],
            duration: 2000,
            delay: 1000
        };
        this.timer = null;
        this.op = Object.assign(d, option);
        this.prev = this.op.prev;
        this.next = this.op.next;
        this.containerWrap = this.op.containerWrap;
        this.slideList = this.op.slideList;
        this.pagenation = this.op.pagenation;
        this.len = this.op.slideList.length;
        this.containerWrap.style.width = this.len * 100 + '%'
        this.index = 0;
        this.type = 1; //默认向右切换
        for (var i = 0; i < this.len; i++) {
            var span = document.createElement('span');
            this.pagenation.append(span);
            this.slideList[i].style.width = (1 / this.len) * 100 + '%';
        }
        var that = this;
        var pageDots = this.pagenation.getElementsByTagName('span');
        pageDots[0].classList.add('on');
        for (var i = 0; i < pageDots.length; i++) {
            pageDots[i].index = i;
            pageDots[i].onclick = function () {
                var _index = this.index;
                that._change(_index);
                that._closePlay();
            }
        };
        // 初始化时需要调用
        this._prev();
        this._next();
    },
    // 切换到上一个
    _prev: function () {
        var that = this;
        this.prev.addEventListener('click', function () {
            that.type = 0;
            that._change();
            that._closePlay();
        })

    },
    // 切换到下一个
    _next: function () {
        var that = this;
        this.next.addEventListener('click', function () {
            that._change();
        });
    },
    // 轮播切换事件
    _change: function (_index) {
        var winWidth = window.innerWidth;
        if (_index >= 0) {
            this.index = _index
        } else {
            //上一个播放
            if (this.type == 0) {
                this.index--;
            } else {
                this.index++;
            }
        }
        if (this.index > this.len - 1) this.index = 0;
        if (this.index < 0) this.index = this.len - 1;
        this.containerWrap.style.transform = 'translateX(-' + winWidth * this.index + 'px)';
        this._addClass();
    },
    // 自动轮播
    _autoPlay: function (_index) {
        var that = this;
        that.type = 1;
        if (that.timer) {
            window.clearInterval(that.timer);
        }
        that.timer = setInterval(function () {
            that._change();
            that._addClass();
        }, that.op.duration)//轮播间隔时间
    },
    _closePlay: function () {
        var that = this;
        that.type = 1;
        if (that.timer) {
            window.clearInterval(that.timer)
        }
        setTimeout(function () {
            that._autoPlay();
        }, that.op.delay);//暂停后再次开始的时间
    },
    // 给当前显示内容添加高亮样式
    _addClass: function () {
        for (var i in this.slideList) {
            this.slideList[i].className = ''
            this.pagenation.getElementsByTagName('span')[i].className = ''
        }
        this.slideList[this.index].classList.add('current');
        this.pagenation.getElementsByTagName('span')[this.index].classList.add('on')
    }
}
